<style lang="less">
    @import '../../styles/common.less';
    @import '../../styles/table.less';
    .ivu-tooltip, .ivu-tooltip-rel {
        display: block;
    }
    .ivu-table-fixed-body {
        position: initial !important;
    }
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title" style="height:35px;">
                        <Icon type="ios-keypad"></Icon> {{title}}
                        <Button v-if="addBtn" type="info" style="float: right" @click="add"><Icon type="plus-round"></Icon> 新增</Button>
                    </p>
                    <Row v-if="search.length>0">
                        <Col span="4" v-for="(item, index) in search" :key="index">
                            <Tooltip :content="item.placeholder" placement="top-start" >
                                <Input v-if="item.type=='input'"
                                       v-model="item.value"
                                       :placeholder="item.placeholder"/>

                                <Select v-if="item.type=='select'"
                                        v-model="item.value"
                                        :placeholder="item.placeholder">
                                    <Option v-for="(option, index) in item.options" :value="option.val" :key="index" >{{option.name}}</Option>
                                </Select>

                                <Date-picker v-if="item.type=='daterange'"
                                             type="daterange"
                                             v-model="item.value"
                                             :placeholder="item.placeholder"
                                             placement="bottom-start">
                                </Date-picker>
                            </Tooltip>
                        </Col>

                        <span @click="getList" style=""><Button type="primary" icon="search">搜索</Button></span>
                        <Button @click="resetTable" type="ghost" >取消</Button>
                    </Row>
                    <p style="height: 15px;"></p>
                    <div>
                        <div style="margin-bottom:10px;text-align: right;">
                            <Page :total="pageParams.total"
                                  :page-size="pageParams.per_page"
                                  :current="pageParams.current_page"
                                  @on-change="changePage" >
                            </Page>
                        </div>
                        <div>
                            <Table stripe max-height="500" :columns="columns" :data="rows" @on-sort-change='changeSort' border></Table>
                        </div>
                        <div style="margin-top:10px;text-align: center;">
                            <Page :total="pageParams.total"
                                  :page-size="pageParams.per_page"
                                  :current="pageParams.current_page"
                                  @on-change="changePage" >
                            </Page>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                title: '列表',
                addBtn: false,
                pageParams: {
                    per_page: 20,
                    total:0,
                    current_page: 1,
                    total_page: 1,
                },
                search: [],
                columns: [],
                rows: [],
            };
        },
        methods: {
            /**列表*/
            getList () {
                this.$api.admin_role_getList({
                    per_page : this.pageParams.per_page,
                    page : this.pageParams.current_page,
                    search : this.$gFun.createSearch(this.search)
                }).then((res) => this.$gFun.pageDataInit.call(this, res)).catch(err=>{});
            },

            /**重置搜索*/
            resetTable () {
                this.pageParams.current_page = 1;
                this.search = [];
                this.getList();
            },

            /**新增*/
            add () {
                this.$router.push({
                    name: 'roleAdd'
                });
            },

            /**详情*/
            detail (param) {console.log(param);

            },

            /**编辑*/
            edit (param) {
                this.$router.push({
                    name: 'roleAdd',
                    params: { uuid: param.uuid }
                });
            },

            /**复制*/
            copy (param) {

            },

            /**删除*/
            remove (param) {
                this.$Modal.confirm({
                    title: '警告',
                    content: '删除后不能恢复，是否确认删除？',
                    onOk: () => {
                        this.rows.splice(param, 1);
                    },
                    onCancel: () => {
                        console.log(param);
                    }
                });
            },

            /**跳转链接*/
            hrefTo (param) {console.log(param);

            },

            /**上下架*/
            show (param) {console.log(param);

            },

            /**禁止启用*/
            enable (param) {console.log(param);

            },

            /**翻页*/
            changePage (param) {
                this.current_page = param;
                this.getList();
            },

            /**排序*/
            changeSort (param) {
                this.$gFun.changeSort.call(this, param);
                this.getList();
            },
        },
        created () {
            this.getList();
        }
    };
</script>
